<template>
  <view class="home-container">
    <view class="status_bar">
      <!-- 这里是状态栏占位 -->
    </view>
    <!-- 侧边栏 -->
    <filter-aside></filter-aside>
    <!-- 顶部导航 -->
    <nav-bar></nav-bar>
    <swiper
      class="swiper"
      indicator-dots
      indicator-active-color="orange"
      autoplay
      interval="5000"
      duration="500"
      circular
    >
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item" mode="" />
      </swiper-item>
    </swiper>
    <home-item title="本季推荐" english="Seasonal Recommend"></home-item>
    <scroll-view scroll-x="true">
      <image
        v-for="(item, index) in recommentList"
        :key="index"
        :src="item"
        mode="heightFix"
      ></image>
    </scroll-view>
    <home-item title="法式经典" english="French Classics"></home-item>
    <image src="../../static/images/home-item04.jpg" class="home-item2"></image>
    <scroll-view scroll-x="true">
      <image
        v-for="(item, index) in recommentList"
        :key="index"
        :src="item"
        mode="heightFix"
      ></image>
    </scroll-view>
    <view class="footer">
      <image class="logo" src="../../static/images/logo.png" mode="" />
      <image class="code" src="../../static/images/erweima.jpg" mode="" />
      <view class="tips">
        Copyright © 2012-2022 上海卡法电子商务有限公司 版权所有
      </view>
    </view>
  </view>
</template>

<script>
import FilterAside from '../../components/FilterAside.vue'
import HomeItem from '../../components/HomeItem.vue'
export default {
  data() {
    return {
      bannerList: [
        '../../static/images/banner01.jpg',
        '../../static/images/banner02.jpg',
        '../../static/images/banner03.jpg',
      ],
      recommentList: [
        '../../static/images/home-item01.jpg',
        '../../static/images/home-item02.jpg',
        '../../static/images/home-item03.jpg',
      ],
    }
  },
  components: {
    'home-item': HomeItem,
    'filter-aside': FilterAside,
  },
  onShow() {
    uni.showTabBar()
  },
}
</script>

<style lang="scss">
.home-container {
  // .status_bar {
  //   height: var(--status-bar-height);
  //   width: 100%;
  //   background-color: #fff;
  // }
  swiper {
    height: 780rpx;
    swiper-item {
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  scroll-view {
    // 让子元素不换行
    white-space: nowrap;
    image {
      height: 290rpx;
    }
  }
  .home-item2 {
    width: 100%;
    display: block;
  }
  .footer {
    text-align: center;
    padding: 0 20rpx;
    background-color: #fdfdfd;
    image {
      display: block;
      margin: 12rpx auto;
    }
    .logo {
      width: 160rpx;
      height: 30rpx;
      // margin: 12rpx 0;
    }
    .code {
      width: 300rpx;
      height: 300rpx;
    }
    .tips {
      margin-bottom: 12rpx;
      font-size: $lxins-fs-12;
    }
  }
}
</style>
